<!-- eslint-disable prettier/prettier -->
<!-- 主体顶部栏 -->
<template>
  <div class="maintopbox wh-100">
    <div class="message-btn center">
      <i class="el-icon-bell"></i>
    </div>
    <div class="user-box">
      <el-avatar
        src="https://img2.baidu.com/it/u=1096555552,2922823320&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      >
      </el-avatar>
      {{ username }}
      <i class="el-icon-arrow-down"></i>
    </div>
    <div class="setting-btn center">
      <i class="el-icon-setting"></i>
    </div>
  </div>
</template>
<!-- eslint-disable prettier/prettier -->
<script>
import { mapState } from "vuex";

export default {
  name: "MainTop",
  components: {},
  computed: {
    // 获取vuex的用户名
    ...mapState("userinfoData", ["username"]),
  },
  mounted() {
    // console.log("username", this.username);
  },
};
</script>
<!-- eslint-disable prettier/prettier -->
<style scoped lang="scss">
* {
  user-select: none;
}
// 头像设置
:deep(.el-avatar--circle) {
  width: 24px;
  height: 24px;
  margin-right: 4px;
}
.maintopbox {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .user-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    padding: 4px;
  }
  .user-box:hover {
    background: rgb(247, 247, 247);
    cursor: pointer;
  }
  // 设置图标
  .setting-btn {
    height: 100%;
    padding: 0px 15px 0px 15px;
    margin-right: 5px;
  }
  .setting-btn:hover {
    background: rgb(247, 247, 247);
    cursor: pointer;
  }
  //消息图标
  .message-btn {
    height: 100%;
    padding: 0px 15px 0px 15px;
  }
  .message-btn:hover {
    background: rgb(247, 247, 247);
    cursor: pointer;
  }
}
</style>
